
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> - Bootstrap Table</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/static/css/animate.css" rel="stylesheet">
    <link href="/static/css/style.css?v=4.1.0" rel="stylesheet">


</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <form class="form-inline" role="form">
                <div class="form-group">
                    权限名称
                    <input type="text" class="form-control" id="permissionName" >
                </div>

                <div class="form-group">
                    权限url
                    <input type="text" class="form-control" id="url" >
                </div>
                <button type="button" id="search" class="btn btn-default">查找</button>
            </form>
        </div>
    </div>
    <!-- Panel Other -->
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="row row-lg">
                <div class="col-sm-12">
                    <div>
                         <button id="add" class="btn btn-default">新增</button>
                         <button id="delete" class="btn btn-default">删除</button>
                    </div>
                    <table id="table">
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="jsTree">

    </div>
    <!-- End Panel Other -->
</div>

<!-- 全局js -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- layer -->
<script src="/static/js/plugins/layer/layer.min.js"></script>


<!-- Peity -->
<script >

    //jsTree

    $("#add").click(function(){
        layer.open({
            type: 2,
            area:['100%','100%'],
            maxmin: true,
            content: '/permission/add' //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    });

    $("#delete").click(function(){
        console.log("is click");
        var a= $("#table").bootstrapTable('getSelections');
        if(a.length<=0){
            alert("请选中一行")
        }else{
            var b=JSON.stringify( a );
            var ids = "";
            for(var i=0;i< a.length;i++){
                   ids += "," + a[i].permissionId ;
            }
            ids = ids.substring(1);
            console.log(ids);
            $.ajax({
                url:"/permission",
                type:"POST",
                data:{
                    _method:'delete',
                    ids:ids
                },
                success:function(result){
                    flushTable();
                    console.log(result);
                }
            });

        }
    });

    $(function(){


        // $.ajax({
        //     url:"/permission/jsTree",
        //     type:"GET",
        //     success:function(result){
        //         $("#jsTree").jstree({
        //             'core':{
        //                 'data':result
        //             }
        //         });
        //     }
        // });


        $("#table").bootstrapTable({
            method: 'get',
            url:'/permission/findAll',
            cache: false,
            //height: 400,
            striped: true,
            pagination: true,
            queryParams:queryParams,
            responseHandler:responseHandler,
            pageNumber:1,
            pageList: [10, 20, 50, 100, 200, 500],
            sidePagination:'server',
            search: false,
            showColumns: true,
            showRefresh: false,
            showExport: false,
            sortable: true,
            exportTypes: ['csv','txt','xml'],
            clickToSelect: false,             //是否开启点击row 选中checkbox
            queryParamsType: 'limit',
            columns:
                    [
                        {field:"checked",checkbox:true},
                        {field:"permissionId",title:"id",align:"center",valign:"middle",sortable:"true"},
                        {field:"permissionName",title:"权限名称",align:"center",valign:"middle",sortable:"true"},
                        {field:"url",title:"地址",align:"center",valign:"middle",sortable:"true"},
                        {field:"type",title:"类型",align:"center",valign:"middle",sortable:"true",formatter:function(value,row,index){
                            if(row['type'] === 0){
                                return "菜单";
                            }
                            if(row['type'] === 1){
                                return "按钮";
                            }
                        }},
                        {field:"icon",title:"图标",align:"center",valign:"middle",sortable:"true",formatter:function(value,row,index){
                              return '<i class="'+ row['icon'] +'"></i>';
                            }},
                        {field:"deleteFlag",title:"删除标志",align:"center",valign:"middle",sortable:"true",formatter:function(value,row,index){
                             if(row['deleteFlag'] === 0){
                                 return "否";
                             } else if(row['deleteFlag'] === 1){
                                  return "是";
                             }
                         }},
                        {field:"sortNum",title:"序号",align:"center",valign:"middle",sortable:"true"},
                        {field:"desc",title:"描述",align:"center",valign:"middle",sortable:"true"},
                        {field:"operate",title:"操作",events:operateEvents1,formatter:operateFormatter}
                    ]
        });



    });


    window.operateEvents1 = {
        'click .RoleOfA': function(e, value, row, index) {
            layer.open({
                type: 2,
                area:['100%','100%'],
                maxmin: true,
                content: '/permission/edit/' + row.permissionId //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
        }
    };

    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="RoleOfA btn-default bt-select">编辑</button>',
        ].join('');
    }


   function queryParams(params) {  //bootstrapTable自带参数
       var current = params.offset / params.limit + 1;
       var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
           size: params.limit ,   //页面大小//params.limit
           current: current,  //页码 // params.offset + 1
           permissionName:  $("#permissionName").val(),
           url: $("#url").val(),
           sort: params.sort,  //排序列名
           sortOrder: params.order//排位命令（desc，asc）
       };
       return temp;
   }

   function responseHandler(res){
       var temp = {
           total: res.total,
           rows: res.records
       }
       return temp;
   }

   $("#search").click(function(){
       flushTable();
   });

    //刷新表格
   function flushTable(){
       $("#table").bootstrapTable('refresh', {url: '/permission/findAll' });
   }

</script>

</body>
</html>
